<template>
    <ListPage ref="page" :query="query" :api="getZzhFpkfList">

        <template #search="{ page, hiddenColumns }">
            <PageSearch ref="search" :query="query" :page="page" has-box @search="() => ($refs.page as any).getData()">
                <template #auth>
                </template>
                <template #input="{ }">
                    <SearchInput v-model="query.keyword" placeholder="客户名称/店铺名称/业务名称" :data="query"
                        :hidden-columns="(hiddenColumns as any)" @trigger="(e) => ($refs.search as any).trigger(e)"
                        @search="() => ($refs.page as any).getData()"
                        @change-column="(prop) => ($refs.page as any).changeColumn(prop)"></SearchInput>
                </template>
                <ElFormItem label="分配记录">
                    <ElSelect filterable clearable :="$attrs" placeholder="" v-model="query.fpjl">
                        <ElOption key="当前有效分配记录" label="当前有效分配记录" value="当前有效分配记录" />
                        <ElOption key="所有历史分配记录" label="所有历史分配记录" value="所有历史分配记录" />
                    </ElSelect>
                </ElFormItem>
            </PageSearch>
        </template>

        <template #table="{ data, hiddenColumns }">
            <ListTable :data="data" :hidden-columns="(hiddenColumns as any)" @openZzhFpkf="openZzhFpkf"
                @fpkfRevoke="fpkfRevoke">
            </ListTable>
        </template>
    </ListPage>
</template>

<script setup lang="ts">
import ListPage from '@/components/list-page/ListPage.vue'
import PageSearch from '@/components/list-page/PageSearch.vue'
import SearchInput from '@/components/list-page/SearchInput.vue'
import ListTable from './ListTable.vue'
import { ref, reactive } from 'vue'
import { getZzhFpkfList,postFpkfRevoke } from '../api'
import { zzhFpKfDialog } from '../dialog/zzhFpkf'
import { ElMessageBox } from 'element-plus';

const page = ref()

const query = reactive({
    keyword: '',
    fpjl: '当前有效分配记录'
})

const openZzhFpkf = async (row) => {
    console.log(row);
    await zzhFpKfDialog.title('子账号分配客服').open({
        row:
        {
            isAdd: true, fpgsDx: row.fpgsDx, jsrq: '2188-01-01',
            fpGsId: row.fpGsId, companyNo: row.companyNo, fpkfDx: row.fpgsDx,
            tcbl: row.tcds
        }
    })
    page.value && page.value.getData();
}

const fpkfRevoke = async (row) => {
    console.log(row);
    await ElMessageBox.confirm('确定撤销吗？', '提示');
    await postFpkfRevoke(row);
    page.value && page.value.getData();
}
</script>